<template>
  <h2>toRefs的使用</h2>
  <!-- <h3>name:{{state.name}}</h3>
  <h3>age:{{state.age}}</h3> -->
  <h3>name:{{name}}</h3>
  <h3>age:{{age}}</h3>
  <h3>name:{{name2}}</h3>
  <h3>age:{{age2}}</h3>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
function useFeatureX () {
  const state = reactive({
    name2: '自来也',
    age2: 47
  })
  return {
    ...toRefs(state)
  }
}
export default defineComponent({
  name: 'App',
  setup () {
    const state = reactive({
      name: '自来也',
      age: 47
    })
    // const state2 = toRefs(state)
    const { name, age } = toRefs(state)
    setInterval(() => {
      // state.name += '=='
      // state2.name.value += '=='
      name.value += '=='
    }, 1000)

    const { name2, age2 } = useFeatureX()

    return {
      // state
      // ...state2
      name,
      age,
      name2,
      age2
    }
  }
})
</script>
